<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Paper.js Path Adjustment</title>
    <!-- <script src="./paper.js"></script> -->
    <script src="./paper-full.min.js"></script>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- <canvas id="myCanvas" resize canvas="canvas-1"></canvas> -->
    <canvas resize="true" id="canvas-1" style="background:red"></canvas>


    </div>

    <script canvas="canvas-1">

        var segment, path;
        var movePath = false;
        var values = {
            paths: 50,
            minPoints: 5,
            maxPoints: 15,
            minRadius: 30,
            maxRadius: 90
        };
        var hitOptions = {
            segments: true,
            stroke: true,
            fill: true,
            tolerance: 5
        };


        // 初始化Paper.js
        paper.install(window);
        paper.setup('canvas-1');

        // 创建一个新的路径
        // var path = new Path();
        // path.strokeColor = 'black';

        // 添加路径点
        // path.add(new Point(50, 50));
        // path.add(new Point(150, 50));
        // path.add(new Point(150, 150));
        // path.add(new Point(50, 150));
        // path.closePath();

        // // 函数，用于更新路径点
        // function updatePathPoint(event) {
        //     var hitResult = paper.project.hitTest(event.point, {
        //         segments: true,
        //         stroke: true
        //     });
        //     if (hitResult) {
        //         // 当鼠标移动时更新路径点
        //         hitResult.segment.point = event.point;
        //     }
        // }

        // // 监听鼠标移动事件
        // function onMouseMove(event) {
        //     updatePathPoint(event);
        // }

        // 开始监听鼠标事件
        // paper.view.onMouseMove = onMouseDrag;


        var myPath = new Path();
        myPath.strokeColor = 'black';
        myPath.add(new Point(0, 0));
        myPath.add(new Point(100, 50));


        createPaths();

        function createPaths() {
            console.log("view", view);
            console.log("paper.view", paper.view == view);
            console.log("view.size", view.size)
            console.log("开始创建路径")
            var radiusDelta = values.maxRadius - values.minRadius;
            var pointsDelta = values.maxPoints - values.minPoints;
            for (var i = 0; i < values.paths; i++) {
                var radius = values.minRadius + Math.random() * radiusDelta;
                var points = values.minPoints + Math.floor(Math.random() * pointsDelta);
                var path = createBlob(view.size.width * Point.random(), radius, points);
                var lightness = (Math.random() - 0.5) * 0.4 + 0.4;
                var hue = Math.random() * 360;
                path.fillColor = { hue: hue, saturation: 1, lightness: lightness };
                path.strokeColor = 'black';


            };
        }

        function createBlob(center, maxRadius, points) {
            console.log("center",center)
            console.log("maxRadius",maxRadius)
            console.log("points",points)
            var path = new Path();
            path.closed = true;
            for (var i = 0; i < points; i++) {
                var delta = new Point({
                    length: (maxRadius * 0.5) + (Math.random() * maxRadius * 0.5),
                    angle: (360 / points) * i
                });
                path.add(center + delta);
            }
            path.smooth();
            return path;
        }


        function onMouseDown(event) {
            segment = path = null;
            var hitResult = project.hitTest(event.point, hitOptions);
            if (!hitResult)
                return;

            if (event.modifiers.shift) {
                if (hitResult.type == 'segment') {
                    hitResult.segment.remove();
                };
                return;
            }

            if (hitResult) {
                path = hitResult.item;
                if (hitResult.type == 'segment') {
                    segment = hitResult.segment;
                } else if (hitResult.type == 'stroke') {
                    var location = hitResult.location;
                    segment = path.insert(location.index + 1, event.point);
                    path.smooth();
                }
            }
            movePath = hitResult.type == 'fill';
            if (movePath)
                project.activeLayer.addChild(hitResult.item);
        }

        function onMouseMove(event) {
            project.activeLayer.selected = false;
            if (event.item)
                event.item.selected = true;
        }

        function onMouseDrag(event) {
            if (segment) {
                segment.point += event.delta;
                path.smooth();
            } else if (path) {
                path.position += event.delta;
            }
        }


        // paper.view.onMouseDown=onMouseDown;
        // paper.view.onMouseMove=onMouseMove;
        // paper.view.onMouseDrag=onMouseDrag;
    </script>
</body>

</html>